<template>
    <a-form layout="vertical" :model="formState" @finish="onFinish">
        <!-- 第一行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="姓名" name="staffName" hasFeedback :rules="[{
                    required: true, message: '姓名为必填项',
                }]">
                    <a-input v-model:value="formState.staffName"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="用户名" name="accountName" hasFeedback
                :rules="[{
                    required: true, message: '用户名为必填项',
                }]">
                    <a-input v-model:value="formState.accountName"></a-input>
                </a-form-item>
            </a-col>
        </a-row>
        <!-- 第二行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="初识密码" name="accountPassword" hasFeedback :rules="[{
                    min: 6, message: '初始密码至少为6位',

                }, {
                    max: 16, message: '初始密码至多为16位'
                }]">
                    <a-input v-model:value="formState.accountPassword"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="性别" name="gender" hasFeedback
                :rules="[{
                    required: true, message: '性别为必填项',
                }]"
                >
                    <a-select v-model:value="formState.gender">
                        <a-select-option value="1">男</a-select-option>
                        <a-select-option value="0">女</a-select-option>
                    </a-select>
                </a-form-item>

            </a-col>
        </a-row>
        <!-- 第三行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="出生日期" name="birthday" hasFeedback
                :rules="[{
                    required: true, message: '出生日期为必填项',
                }]"
                >
                    <a-date-picker v-model:value="formState.birthday"></a-date-picker>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="学历" name="educationType" hasFeedback
                :rules="[{
                    required: true, message: '学历为必填项',
                }]"
                >
                    <a-select v-model:value="formState.educationType">
                        <a-select-option value="0">无学历</a-select-option>
                        <a-select-option value="1">小学</a-select-option>
                        <a-select-option value="2">初中</a-select-option>
                        <a-select-option value="3">高中</a-select-option>
                        <a-select-option value="4">中专</a-select-option>
                        <a-select-option value="5">大专</a-select-option>
                        <a-select-option value="6">本科</a-select-option>
                        <a-select-option value="7">研究生</a-select-option>
                        <a-select-option value="8">博士</a-select-option>
                    </a-select>
                </a-form-item>

            </a-col>
        </a-row>
        <!-- 第四行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="部门" name="departmentId" hasFeedback
                :rules="[{
                    required: true, message: '部门为必填项',
                }]"
                >
                    <a-select v-model:value="formState.departmentId">
                        <a-select-option value="1">人事部</a-select-option>
                        <a-select-option value="2">研发部</a-select-option>
                        <a-select-option value="3">运营部</a-select-option>
                        <a-select-option value="4">市场部</a-select-option>
                        <a-select-option value="5">销售部</a-select-option>
                        <a-select-option value="6">商务部</a-select-option>
                        <a-select-option value="7">设计部</a-select-option>
                        <a-select-option value="8">生产部</a-select-option>
                        <a-select-option value="9">仓库部</a-select-option>
                        <a-select-option value="10">客服部</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="职级" name="levelId" hasFeedback
                :rules="[{
                    required: true, message: '职级为必填项',
                }]"
                >
                    <a-select v-model:value="formState.levelId">
                        <a-select-option value="1">T1-1</a-select-option>
                        <a-select-option value="2">T1-2</a-select-option>
                        <a-select-option value="3">T1-3</a-select-option>
                        <a-select-option value="4">T2-1</a-select-option>
                        <a-select-option value="5">T2-2</a-select-option>
                        <a-select-option value="6">T2-3</a-select-option>
                        <a-select-option value="7">T3-1</a-select-option>
                        <a-select-option value="8">T3-2</a-select-option>
                    </a-select>
                </a-form-item>

            </a-col>
        </a-row>
        <!-- 第五行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="婚姻状况" name="isMarriage" hasFeedback
                :rules="[{
                    required: true, message: '婚姻状况为必填项',
                }]"
                >
                    <a-select v-model:value="formState.isMarriage">
                        <a-select-option value="0">未婚</a-select-option>
                        <a-select-option value="1">已婚</a-select-option>
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="入职日期" name="onboardingTime" hasFeedback
                :rules="[{
                    required: true, message: '入职日期为必填项',
                }]"
                >
                    <a-date-picker v-model:value="formState.onboardingTime"></a-date-picker>
                </a-form-item>
            </a-col>
        </a-row>
        <!--第六行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="手机号码" name="mobile" hasFeedback
                :rules="[{
                    required: true, message: '手机号码为必填项',
                }]"
                >
                    <a-input v-model:value="formState.mobile"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="邮箱地址" name="email" hasFeedback
                :rules="[{
                    required: true, message: '邮箱地址为必填项',
                }]"
                >
                    <a-input v-model:value="formState.email"></a-input>
                </a-form-item>
            </a-col>
        </a-row>
        <!--第七行 -->
        <a-row>
            <a-col :span="11">
                <a-form-item label="毕业院校" name="graduatedSchool" hasFeedback
                :rules="[{
                    required: true, message: '毕业院校为必填项',
                }]"
                >
                    <a-input v-model:value="formState.graduatedSchool"></a-input>
                </a-form-item>
            </a-col>
            <a-col :span="11" class="ml-40">
                <a-form-item label="薪资" name="salary" hasFeedback
                :rules="[{
                    required: true, message: '薪资为必填项',
                }]"
                >
                    <a-input v-model:value="formState.salary"></a-input>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="24" style="text-align: right;">
                <a-button type="primary" html-type="submit" class="mr-25">确定</a-button>
            </a-col>
        </a-row>
    </a-form>
</template>

<script setup lang="ts">
import appStore from "@/store";
import apis from '@/apis/index';
import { message } from "ant-design-vue";
const props = defineProps({
    staffDetail: {
        type: Object,
        default: {},
    },
    setDialogStatus: {
        type: Function,
        default: () => {},
    }
});
const formState = reactive({
    staffName: props.staffDetail?.staffName,
    accountName: props.staffDetail?.accountName,
    accountPassword: props.staffDetail?.accountPassword || '',
    gender: props.staffDetail?.gender.toString() || '',
    birthday: '',
    educationType: props.staffDetail?.educationType || '',
    departmentId: props.staffDetail?.departmentName || '',
    levelId: props.staffDetail?.levelName || '',
    isMarriage: props.staffDetail?.isMarriage ? '1' : '0' || '',
    onboardingTime: '',
    mobile: props.staffDetail?.mobile || '',
    email: props.staffDetail?.email || '',
    graduatedSchool: props.staffDetail?.graduatedSchool || '',
    salary: props.staffDetail?.salary || '',
});
const { staffDetailRef } = storeToRefs(appStore.useStaffStore);
const genderOptions = reactive([
    { value: '1', label: '男' },
    { value: '0', label: '女' },
])
const onFinish = async (values) => {
    console.log('onfinish', values);
    const temp = {
        birthday: new Date(formState.birthday),
        onboardingTime: new Date(formState.onboardingTime),
    };
    const params = {
        ...formState,
        ...temp
    };
    
    const res = await apis.staff.updateStaff_API(params);
    if (res) {
        props.setDialogStatus(false);
        message.success('员工修改成功');
        staffDetailRef.value = null;
        return;
    }
    message.error('员工修改失败');
    staffDetailRef.value = null;
}
onMounted(() => { });
</script>

<style  lang="less" scoped>
input {
    width: 100%;
}

.ant-picker {
    width: 100%;
}

.ml-40 {
    margin-left: 40px;
}

.mr-25 {
    margin-right: 25px;
}
</style>
